<!-- src/views/UserInfo.vue -->
<template>
  <div class="login-container">
    <el-card class="login-card" shadow="never">
      <template #header>
        <h2 class="login-title">编辑个人信息</h2>
      </template>

      <!-- 数据加载状态 -->
      <div v-if="dataLoading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>

      <el-form
        v-else
        :model="formData"
        :rules="rules"
        ref="formRef"
        class="login-form"
        @submit.prevent="onSubmit"
      >
        <!-- 头像上传 -->
        <el-form-item label="头像">
          <div class="avatar-upload">
            <el-avatar
              :size="80"
              :src="
                formData.avatar
                  ? 'http://192.168.199.231:9000/fznostalgia/user/' +
                    formData.avatar
                  : defaultAvatar
              "
              @error="onAvatarError"
            />
            <el-upload
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="onAvatarChange"
              accept="image/*"
            >
              <el-button
                type="primary"
                text
                size="normal"
                style="margin-left: 10px"
              >
                更换头像
              </el-button>
            </el-upload>
          </div>
        </el-form-item>

        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="formData.username"
            placeholder="请输入用户名"
            clearable
            @blur="checkUsername"
          />
          <div
            v-if="checking"
            class="el-form-item__extra"
            style="color: #e6a23c"
          >
            正在检查...
          </div>
        </el-form-item>

        <!-- 居住地：省 -->
        <el-form-item label="省" prop="province">
          <el-select
            v-model="formData.province"
            placeholder="请选择省"
            style="width: 100%"
            @change="onProvinceChange"
          >
            <el-option v-for="p in provinces" :key="p" :label="p" :value="p" />
          </el-select>
        </el-form-item>

        <!-- 居住地：市 -->
        <el-form-item label="市" prop="city">
          <el-select
            v-model="formData.city"
            placeholder="请选择市"
            style="width: 100%"
            :disabled="!formData.province"
          >
            <el-option v-for="c in cities" :key="c" :label="c" :value="c" />
          </el-select>
        </el-form-item>

        <!-- 手机号 -->
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="formData.phone"
            placeholder="请输入手机号"
            clearable
          />
        </el-form-item>

        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="formData.email"
            placeholder="请输入邮箱"
            clearable
          />
        </el-form-item>

        <!-- 个人简介 - 暂时隐藏，后端API暂无此字段 -->
        <!-- <el-form-item label="个人简介" prop="bio">
          <el-input
            v-model="formData.bio"
            type="textarea"
            :rows="3"
            placeholder="介绍一下自己吧（最多100字）"
            maxlength="100"
            show-word-limit
          />
        </el-form-item> -->

        <!-- 按钮区域 -->
        <el-form-item>
          <el-button
            type="primary"
            native-type="submit"
            class="submit-btn"
            :loading="loading"
          >
            {{ loading ? "保存中..." : "保 存" }}
          </el-button>
          <el-button @click="gotoHome" class="home-btn"> 返回首页 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getUserDetails, updateUserInfo } from "@/api/user";
import { getCurrentUserId } from "@/stores/user";
import { email } from "@vuelidate/validators";

// 默认头像
const defaultAvatar = new URL(
  "@/assets/images/avatar/cha1.png",
  import.meta.url
).href;

// 路由实例
const router = useRouter();

// 表单引用
const formRef = ref(null);

// 当前用户ID（从登录状态获取）
const currentUserId = ref(getCurrentUserId());

// 城市ID到省市的映射表（简化版，实际项目中应该从后端获取完整映射）
const cityIdMap = {
  1: { province: "福建省", city: "福州市" },
  2: { province: "福建省", city: "厦门市" },
  3: { province: "福建省", city: "泉州市" },
  4: { province: "广东省", city: "广州市" },
  5: { province: "广东省", city: "深圳市" },
  // 可以根据实际需要扩展更多城市映射
};

// 表单数据
const formData = reactive({
  username: "",
  avatar: "",
  province: "",
  city: "",
  phone: "",
  email: "",
  bio: "", // 后端暂无此字段，保留前端显示但不提交
});

// 原始数据快照，用于判断是否有修改
const originalData = reactive({});

// 状态
const loading = ref(false);
const checking = ref(false); // 正在检查用户名
const dataLoading = ref(false); // 数据加载状态

// 完整的中国省-市映射表
const provinceCityMap = {
  北京市: [
    "东城区",
    "西城区",
    "朝阳区",
    "丰台区",
    "石景山区",
    "海淀区",
    "门头沟区",
    "房山区",
    "通州区",
    "顺义区",
    "昌平区",
    "大兴区",
    "怀柔区",
    "平谷区",
    "密云区",
    "延庆区",
  ],
  天津市: [
    "和平区",
    "河东区",
    "河西区",
    "南开区",
    "河北区",
    "红桥区",
    "东丽区",
    "西青区",
    "津南区",
    "北辰区",
    "武清区",
    "宝坻区",
    "滨海新区",
    "宁河区",
    "静海区",
    "蓟州区",
  ],
  河北省: [
    "石家庄市",
    "唐山市",
    "秦皇岛市",
    "邯郸市",
    "邢台市",
    "保定市",
    "张家口市",
    "承德市",
    "沧州市",
    "廊坊市",
    "衡水市",
  ],
  山西省: [
    "太原市",
    "大同市",
    "阳泉市",
    "长治市",
    "晋城市",
    "朔州市",
    "晋中市",
    "运城市",
    "忻州市",
    "临汾市",
    "吕梁市",
  ],
  内蒙古自治区: [
    "呼和浩特市",
    "包头市",
    "乌海市",
    "赤峰市",
    "通辽市",
    "鄂尔多斯市",
    "呼伦贝尔市",
    "巴彦淖尔市",
    "乌兰察布市",
    "兴安盟",
    "锡林郭勒盟",
    "阿拉善盟",
  ],
  辽宁省: [
    "沈阳市",
    "大连市",
    "鞍山市",
    "抚顺市",
    "本溪市",
    "丹东市",
    "锦州市",
    "营口市",
    "阜新市",
    "辽阳市",
    "盘锦市",
    "铁岭市",
    "朝阳市",
    "葫芦岛市",
  ],
  吉林省: [
    "长春市",
    "吉林市",
    "四平市",
    "辽源市",
    "通化市",
    "白山市",
    "松原市",
    "白城市",
    "延边朝鲜族自治州",
  ],
  黑龙江省: [
    "哈尔滨市",
    "齐齐哈尔市",
    "鸡西市",
    "鹤岗市",
    "双鸭山市",
    "大庆市",
    "伊春市",
    "佳木斯市",
    "七台河市",
    "牡丹江市",
    "黑河市",
    "绥化市",
    "大兴安岭地区",
  ],
  上海市: [
    "黄浦区",
    "徐汇区",
    "长宁区",
    "静安区",
    "普陀区",
    "虹口区",
    "杨浦区",
    "闵行区",
    "宝山区",
    "嘉定区",
    "浦东新区",
    "金山区",
    "松江区",
    "青浦区",
    "奉贤区",
    "崇明区",
  ],
  江苏省: [
    "南京市",
    "无锡市",
    "徐州市",
    "常州市",
    "苏州市",
    "南通市",
    "连云港市",
    "淮安市",
    "盐城市",
    "扬州市",
    "镇江市",
    "泰州市",
    "宿迁市",
  ],
  浙江省: [
    "杭州市",
    "宁波市",
    "温州市",
    "嘉兴市",
    "湖州市",
    "绍兴市",
    "金华市",
    "衢州市",
    "舟山市",
    "台州市",
    "丽水市",
  ],
  安徽省: [
    "合肥市",
    "芜湖市",
    "蚌埠市",
    "淮南市",
    "马鞍山市",
    "淮北市",
    "铜陵市",
    "安庆市",
    "黄山市",
    "滁州市",
    "阜阳市",
    "宿州市",
    "六安市",
    "亳州市",
    "池州市",
    "宣城市",
  ],
  福建省: [
    "福州市",
    "厦门市",
    "莆田市",
    "三明市",
    "泉州市",
    "漳州市",
    "南平市",
    "龙岩市",
    "宁德市",
  ],
  江西省: [
    "南昌市",
    "景德镇市",
    "萍乡市",
    "九江市",
    "新余市",
    "鹰潭市",
    "赣州市",
    "吉安市",
    "宜春市",
    "抚州市",
    "上饶市",
  ],
  山东省: [
    "济南市",
    "青岛市",
    "淄博市",
    "枣庄市",
    "东营市",
    "烟台市",
    "潍坊市",
    "济宁市",
    "泰安市",
    "威海市",
    "日照市",
    "临沂市",
    "德州市",
    "聊城市",
    "滨州市",
    "菏泽市",
  ],
  河南省: [
    "郑州市",
    "开封市",
    "洛阳市",
    "平顶山市",
    "安阳市",
    "鹤壁市",
    "新乡市",
    "焦作市",
    "濮阳市",
    "许昌市",
    "漯河市",
    "三门峡市",
    "南阳市",
    "商丘市",
    "信阳市",
    "周口市",
    "驻马店市",
    "济源市",
  ],
  湖北省: [
    "武汉市",
    "黄石市",
    "十堰市",
    "宜昌市",
    "襄阳市",
    "鄂州市",
    "荆门市",
    "孝感市",
    "荆州市",
    "黄冈市",
    "咸宁市",
    "随州市",
    "恩施土家族苗族自治州",
    "仙桃市",
    "潜江市",
    "天门市",
    "神农架林区",
  ],
  湖南省: [
    "长沙市",
    "株洲市",
    "湘潭市",
    "衡阳市",
    "邵阳市",
    "岳阳市",
    "常德市",
    "张家界市",
    "益阳市",
    "郴州市",
    "永州市",
    "怀化市",
    "娄底市",
    "湘西土家族苗族自治州",
  ],
  广东省: [
    "广州市",
    "韶关市",
    "深圳市",
    "珠海市",
    "汕头市",
    "佛山市",
    "江门市",
    "湛江市",
    "茂名市",
    "肇庆市",
    "惠州市",
    "梅州市",
    "汕尾市",
    "河源市",
    "阳江市",
    "清远市",
    "东莞市",
    "中山市",
    "潮州市",
    "揭阳市",
    "云浮市",
  ],
  广西壮族自治区: [
    "南宁市",
    "柳州市",
    "桂林市",
    "梧州市",
    "北海市",
    "防城港市",
    "钦州市",
    "贵港市",
    "玉林市",
    "百色市",
    "贺州市",
    "河池市",
    "来宾市",
    "崇左市",
  ],
  海南省: [
    "海口市",
    "三亚市",
    "三沙市",
    "儋州市",
    "五指山市",
    "琼海市",
    "文昌市",
    "万宁市",
    "东方市",
    "定安县",
    "屯昌县",
    "澄迈县",
    "临高县",
    "白沙黎族自治县",
    "昌江黎族自治县",
    "乐东黎族自治县",
    "陵水黎族自治县",
    "保亭黎族苗族自治县",
    "琼中黎族苗族自治县",
  ],
  重庆市: [
    "万州区",
    "涪陵区",
    "渝中区",
    "大渡口区",
    "江北区",
    "沙坪坝区",
    "九龙坡区",
    "南岸区",
    "北碚区",
    "綦江区",
    "大足区",
    "渝北区",
    "巴南区",
    "黔江区",
    "长寿区",
    "江津区",
    "合川区",
    "永川区",
    "南川区",
    "璧山区",
    "铜梁区",
    "潼南区",
    "荣昌区",
    "开州区",
    "梁平区",
    "武隆区",
    "城口县",
    "丰都县",
    "垫江县",
    "忠县",
    "云阳县",
    "奉节县",
    "巫山县",
    "巫溪县",
    "石柱土家族自治县",
    "秀山土家族苗族自治县",
    "酉阳土家族苗族自治县",
    "彭水苗族土家族自治县",
  ],
  四川省: [
    "成都市",
    "自贡市",
    "攀枝花市",
    "泸州市",
    "德阳市",
    "绵阳市",
    "广元市",
    "遂宁市",
    "内江市",
    "乐山市",
    "南充市",
    "眉山市",
    "宜宾市",
    "广安市",
    "达州市",
    "雅安市",
    "巴中市",
    "资阳市",
    "阿坝藏族羌族自治州",
    "甘孜藏族自治州",
    "凉山彝族自治州",
  ],
  贵州省: [
    "贵阳市",
    "六盘水市",
    "遵义市",
    "安顺市",
    "毕节市",
    "铜仁市",
    "黔西南布依族苗族自治州",
    "黔东南苗族侗族自治州",
    "黔南布依族苗族自治州",
  ],
  云南省: [
    "昆明市",
    "曲靖市",
    "玉溪市",
    "保山市",
    "昭通市",
    "丽江市",
    "普洱市",
    "临沧市",
    "楚雄彝族自治州",
    "红河哈尼族彝族自治州",
    "文山壮族苗族自治州",
    "西双版纳傣族自治州",
    "大理白族自治州",
    "德宏傣族景颇族自治州",
    "怒江傈僳族自治州",
    "迪庆藏族自治州",
  ],
  西藏自治区: [
    "拉萨市",
    "日喀则市",
    "昌都市",
    "林芝市",
    "山南市",
    "那曲市",
    "阿里地区",
  ],
  陕西省: [
    "西安市",
    "铜川市",
    "宝鸡市",
    "咸阳市",
    "渭南市",
    "延安市",
    "汉中市",
    "榆林市",
    "安康市",
    "商洛市",
  ],
  甘肃省: [
    "兰州市",
    "嘉峪关市",
    "金昌市",
    "白银市",
    "天水市",
    "武威市",
    "张掖市",
    "平凉市",
    "酒泉市",
    "庆阳市",
    "定西市",
    "陇南市",
    "临夏回族自治州",
    "甘南藏族自治州",
  ],
  青海省: [
    "西宁市",
    "海东市",
    "海北藏族自治州",
    "黄南藏族自治州",
    "海南藏族自治州",
    "果洛藏族自治州",
    "玉树藏族自治州",
    "海西蒙古族藏族自治州",
  ],
  宁夏回族自治区: ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"],
  新疆维吾尔自治区: [
    "乌鲁木齐市",
    "克拉玛依市",
    "吐鲁番市",
    "哈密市",
    "昌吉回族自治州",
    "博尔塔拉蒙古自治州",
    "巴音郭楞蒙古自治州",
    "阿克苏地区",
    "克孜勒苏柯尔克孜自治州",
    "喀什地区",
    "和田地区",
    "伊犁哈萨克自治州",
    "塔城地区",
    "阿勒泰地区",
    "石河子市",
    "阿拉尔市",
    "图木舒克市",
    "五家渠市",
    "北屯市",
    "铁门关市",
    "双河市",
    "可克达拉市",
    "昆玉市",
    "胡杨河市",
    "新星市",
    "白杨市",
  ],
  台湾省: [
    "台北市",
    "新北市",
    "桃园市",
    "台中市",
    "台南市",
    "高雄市",
    "基隆市",
    "新竹市",
    "嘉义市",
    "新竹县",
    "苗栗县",
    "彰化县",
    "南投县",
    "云林县",
    "嘉义县",
    "屏东县",
    "宜兰县",
    "花莲县",
    "台东县",
    "澎湖县",
    "金门县",
    "连江县",
  ],
  香港特别行政区: [
    "中西区",
    "湾仔区",
    "东区",
    "南区",
    "油尖旺区",
    "深水埗区",
    "九龙城区",
    "黄大仙区",
    "观塘区",
    "北区",
    "大埔区",
    "沙田区",
    "西贡区",
    "荃湾区",
    "屯门区",
    "元朗区",
    "葵青区",
    "离岛区",
  ],
  澳门特别行政区: [
    "花地玛堂区",
    "圣安多尼堂区",
    "大堂区",
    "望德堂区",
    "风顺堂区",
    "嘉模堂区",
    "圣方济各堂区",
    "路凼城",
    "澳门半岛",
    "氹仔",
    "路环",
  ],
};

// 所有省
const provinces = Object.keys(provinceCityMap);

// 当前省对应的市
const cities = computed(() => {
  return formData.province ? provinceCityMap[formData.province] || [] : [];
});

// 用户名占用数据库（模拟）
const usedUsernames = new Set([
  "admin",
  "root",
  "test",
  "demo",
  "guest",
  "zhangsan",
]);

// 加载用户数据
const loadUserData = async () => {
  // 检查是否有用户ID
  if (!currentUserId.value) {
    ElMessage.error("请先登录");
    router.push("/login");
    return;
  }

  try {
    dataLoading.value = true;
    const userData = await getUserDetails(currentUserId.value);

    // 映射API数据到表单数据
    formData.username = userData.username || "";
    formData.phone = userData.phone || "";
    formData.avatar = userData.avatar ? userData.avatar : defaultAvatar;
    console.log(formData.avatar);
    formData.email = userData.email || "";

    // 根据cityId映射省市信息
    if (userData.cityId && cityIdMap[userData.cityId]) {
      formData.province = cityIdMap[userData.cityId].province;
      formData.city = cityIdMap[userData.cityId].city;
    } else {
      formData.province = "";
      formData.city = "";
    }

    // 个人简介字段后端暂无，保持为空
    formData.bio = "";

    // 更新原始数据快照
    Object.assign(originalData, JSON.parse(JSON.stringify(formData)));
  } catch (error) {
    ElMessage.error("加载用户信息失败: " + error.message);
  } finally {
    dataLoading.value = false;
  }
};

// 监听省变化，清空市
const onProvinceChange = () => {
  formData.city = "";
};

// 头像上传处理
const onAvatarChange = (uploadFile) => {
  const reader = new FileReader();
  reader.onload = () => {
    console.log(reader.result);

    formData.avatar = reader.result;
  };
  reader.readAsDataURL(uploadFile.raw);
};

// 头像加载失败
const onAvatarError = () => {
  formData.avatar = defaultAvatar;
  return true;
};

// 检查用户名是否被占用
const checkUsername = async () => {
  if (!formData.username) return;

  checking.value = true;
  // 模拟网络延迟
  await new Promise((resolve) => setTimeout(resolve, 500));
  checking.value = false;

  if (
    usedUsernames.has(formData.username) &&
    formData.username !== currentUser.username
  ) {
    ElMessage.error("用户名已被占用");
  } else {
    ElMessage.success("用户名可用");
  }
};

// 验证规则
const rules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 2, max: 16, message: "用户名长度为 2-16 个字符", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/,
      message: "用户名只能包含中文、英文、数字",
      trigger: "blur",
    },
  ],
  province: [{ required: true, message: "请选择省", trigger: "change" }],
  city: [{ required: true, message: "请选择市", trigger: "change" }],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  email: [
    { required: false, message: "请输入邮箱地址", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
  // 移除bio验证规则，因为该字段已隐藏
});

// 判断是否有未保存的修改
const hasUnsavedChanges = computed(() => {
  return JSON.stringify(formData) !== JSON.stringify(originalData);
});

// 提交保存
const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.error("请检查输入信息");
      return;
    }

    loading.value = true;

    try {
      // 准备提交的数据
      const updateData = {
        username: formData.username,
        phone: formData.phone,
        // 注意：这里只提交文件名，不是完整路径
        avatar: formData.avatar.includes("avatar/")
          ? formData.avatar.split("avatar/")[1]
          : "cha1.png",
        // 根据省市信息找到对应的cityId
        cityId: findCityId(formData.province, formData.city),
        // bio字段后端暂无，不提交
      };

      await updateUserInfo(currentUserId.value, updateData);

      // 更新原始数据快照
      Object.assign(originalData, JSON.parse(JSON.stringify(formData)));

      ElMessage.success("个人信息已保存！");
    } catch (error) {
      ElMessage.error("保存失败: " + error.message);
    } finally {
      loading.value = false;
    }
  });
};

// 根据省市信息查找cityId
const findCityId = (province, city) => {
  for (const [id, location] of Object.entries(cityIdMap)) {
    if (location.province === province && location.city === city) {
      return parseInt(id);
    }
  }
  return 1; // 默认返回1（福州市）
};

// 返回首页（有未保存提示）
const gotoHome = () => {
  if (hasUnsavedChanges.value) {
    ElMessageBox.confirm("您有未保存的修改，是否离开？", "提示", {
      confirmButtonText: "保存并离开",
      cancelButtonText: "放弃修改",
      distinguishCancelAndClose: true,
      type: "warning",
    })
      .then(() => {
        onSubmit(); // 保存
      })
      .catch((action) => {
        if (action === "cancel") {
          router.push("/");
        }
      });
  } else {
    router.push("/");
  }
};

// 组件挂载时加载用户数据
onMounted(() => {
  loadUserData();
});
</script>

<style scoped>
/* 复用 LoginView 样式 */
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: linear-gradient(135deg, #007B8A, #004B55); */
  padding: 15px;
}

.login-card {
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  overflow: hidden;
  background: white;
}

.login-title {
  text-align: center;
  color: #333;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.login-form {
  padding: 20px;
}

.avatar-upload {
  display: flex;
  align-items: center;
}

.el-form-item__extra {
  margin-top: -5px;
  font-size: 12px;
}

.submit-btn {
  width: 100%;
  margin-bottom: 10px;
}

.home-btn {
  width: 100%;
}

.loading-container {
  padding: 20px;
}
</style>
